<template>
  <div style="padding: 24px;">
    <div
      style="font-size: 16px;font-weight: 500;color: #1D2129;margin-bottom: 16px;"
    >
      体育经费投入
    </div>
    <div style="display: flex; justify-content: space-between;">
      <div style="display: flex; width: 50%;">
        <div>
          <div style="font-size: 24px;color: #0F0F0F;">{{ this.chartData.allMoneyTotal }}</div>
          <div style="font-size: 12px;">体育经费总投入/万元</div>
        </div>
      </div>
      <div style="display: flex; width: 50%;">
        <div>
          <div style="font-size: 24px;color: #0F0F0F;">{{ this.chartData.avgMoney }}</div>
          <div style="font-size: 12px;">当年体育生人均经费投入/元</div>
        </div>
      </div>
    </div>
    <div id="Chart4" style="width:100%;height:260px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { formatUtil } from "@/utils/index";
import { getPutMoneyData } from "@/api/statistics";
export default {
  data() {
    return {
      chartData: {
        allMoneyTotal: 0,
        avgMoney: 0,
        eduMoneyRatio: 0,
        otherMoneyRatio: 0,
        schoolMoneyRatio: 0,
        sportMoneyRatio: 0,
        traditionSportMoneyRatio: 0
      }
    };
  },
  mounted() {
    this.datalist();
  },

  methods: {
    async datalist() {
      const res = await getPutMoneyData({ year: new Date().getFullYear() });
      if (res && res.data) {
        this.chartData.allMoneyTotal = res.data.allMoneyTotal
        this.chartData.avgMoney = res.data.avgMoney
        this.chartData.eduMoneyRatio = res.data.eduMoneyRatio
        this.chartData.otherMoneyRatio = res.data.otherMoneyRatio
        this.chartData.schoolMoneyRatio = res.data.schoolMoneyRatio
        this.chartData.sportMoneyRatio = res.data.sportMoneyRatio
        this.chartData.traditionSportMoneyRatio = res.data.traditionSportMoneyRatio
      } 
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("Chart4"));
      // 指定图表的配置项和数据
      var option;
      option = {
        tooltip: {
          formatter: function(info) {
            var value = info.value;
            var treePathInfo = info.treePathInfo;
            var treePath = [];
            for (var i = 1; i < treePathInfo.length; i++) {
              treePath.push(treePathInfo[i].name);
            }
            return [
              '<div class="tooltip-title">' +
                formatUtil.encodeHTML(treePath.join("/")) +
                "</div>",
              "占比: " + formatUtil.addCommas(value) + " %"
            ].join("");
          }
        },
        series: [
          {
            roam: false, //不偏移放大
            type: "treemap", //类型
            nodeClick: false, //点击事件
            breadcrumb: { show: false }, //去掉下方标题
            data: [
              {
                name: "用于传统项目校代表队（训练与比赛）经费（万元）",
                value: this.chartData.traditionSportMoneyRatio,
                itemStyle: {
                  color: "#E8FFFB"
                }
              },
              {
                name: "其中教育补助（万元）",
                value: this.chartData.eduMoneyRatio,
                itemStyle: {
                  color: "#F7F8FA"
                }
              },
              {
                name: "其中体育局补助（万元）",
                value: this.chartData.sportMoneyRatio,
                itemStyle: {
                  color: "#F5E8FF"
                }
              },
              {
                name: "本校自筹（万元）",
                value: this.chartData.schoolMoneyRatio,
                itemStyle: {
                  color: "#FFE4BA"
                }
              },
              {
                name: "其他经费（万元）",
                value: this.chartData.otherMoneyRatio,
                itemStyle: {
                  color: "#FDF4BF"
                }
              }
            ]
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      // 监听父元素大小变化 刷新图表
      var ro = new ResizeObserver(entries => {
        for (let entry of entries) {
          const cr = entry.contentRect;
          myChart.resize();
        }
      });
      ro.observe(Chart);
    }
  }
};
</script>

<style scoped>
.dianidan {
  width: 7px;
  height: 7px;
  margin-right: 5px;
  margin-top: 3px;
}
</style>
